page {
  background-color: #f5f5f5;
}
.header {
  width: 100%;
  height: 200rpx;
  background-color: #4b5cc4;
  .userInfo {
    height: 160rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 30rpx;
      .detail {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .userName {
          font-size: 34rpx;
          margin-left: 20rpx;
          color: #fff;
        }
        .userCoin {
          display: flex;
          align-items: center;
          .count {
            font-size: 30rpx;
            margin-left: 20rpx;
            color: #fff;
          }
          .toCount {
            font-size: 30rpx;
            margin-left: 20rpx;
            color: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
      .userAva {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        // background-color: #e0e0e0;
      } 
    }
    .rArr {
      width: 55rpx;
      height: 55rpx;
      margin-right: 30rpx;
    }
  }
  .vip {
    width: 90%;
    height: 140rpx;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .vipInfo {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
      .vipRole {
        height: 50rpx;
        display: flex;
        align-items: center;
        & > text {
          font-size: 32rpx;
          color: #4b5cc4;
        }
        & > .vipIcon {
          width: 45rpx;
          height: 45rpx;
          margin-left: 10rpx;
        }
      }
      .vipTip {
        font-size: 26rpx;
        margin-top: 10rpx;
        color: gray;
      }
    }
    .vipBtn {
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 24rpx;
    }
  }
}
.center {
  width: 90%;
  background-color: #fff;
  margin: 140rpx auto;
  border-radius: 12rpx;
  box-shadow: 1px 1px 3px #e0e0e0;
}
.noLogin {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70rpx;
  & > image {
    margin: 0 auto;
  }
  .tip {
    font-size: 28rpx;
    color: gray;
    & > text:last-child {
      margin-left: 10rpx;
      color: #4b5cc4;
    }
  }
}
.logout {
  width: 90%;
  background-color: #fff;
  margin: -80rpx auto;
  border-radius: 12rpx;
  box-shadow: 1px 1px 3px #e0e0e0;
}